<template>
	
	<view class="homelist animated fadeInLeft">
			<view class="userHead" @tap="toUserSpace">
				<image :src="item.userheadpic" mode="widthFix" lazy-load></image>
			</view>
			<view class="userContent">
				<view class="userBox">
					<view class="userBoxL">
						{{item.userhead}}
						<view class="userAge" :class="{'userAgeSex':item.sex==1}">
							<!-- <view class="icon iconfont icon-nan" v-if="item.sex==0">{{item.userage}}</view> -->
							<!-- <view class="icon iconfont icon-nv" v-if="item.sex==1">{{item.userage}}</view> -->
							<view class="icon iconfont" :class="[item.sex==0?'icon-nan':'icon-nv']"></view>
						</view>
					</view>
					<view class="userFollow" v-show="!follow" @tap="isfollow(item)">
						<view class="icon iconfont icon-zengjia">关注</view>
					</view>
				</view>
				<view>
					{{item.usertext}}
				</view>
				<view class="userType">
					<image :src="item.userPic" mode="widthFix" lazy-load v-if="item.userType==0" v-show="item.userPic"></image>
					<template v-if="item.userType==1" >
						<image :src="item.userPic" mode="widthFix" v-show="item.userPic"></image>
						<view class="icon iconfont icon-bofang" v-show="item.userPic"></view>
						<view class="userDetail" v-show="item.userPic">{{item.userPlayNum}}次播放 {{item.userplayLong}}</view>
					</template>
					<view class="userTypeT" v-if="item.userType==3">
						<image :src="item.usertype3.img" mode="widthFix" lazy-load v-show="item.userPic"></image>
						<text>{{item.usertype3.text}}</text>
					</view>

				</view>
				<view class="userFoot">
					<view>
						<text>{{item.useraddress}}</text>
					</view>
					<view class="userfunction">
						<view class="icon iconfont icon-zhuanfa">{{item.userinfo.forward}}</view>
						<view class="icon iconfont icon-pinglun1">{{item.userinfo.news}}</view>
						<view class="icon iconfont icon-ccdbaa">{{item.userinfo.fabulous}}</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default{
		props:['item'],
		data(){
			return{
				 follow:this.item.isFollow,
			}
		},
		methods:{
			isfollow(item){
				this.follow=true;
				uni.showToast({
					title: '关注成功'
				});
			},
			toUserSpace(){
				console.log(111)
				uni.navigateTo({
					url: '../../pages/user-space/user-space',
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.homelist{
		display: flex;
		padding: 20upx;
		
		.userHead{
			width: 100upx;
			height: 100upx;
			flex-shrink: 0;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
				border: 1px solid #CCCCCC;
			}
		}
		.userContent{
			flex: 1;
			padding: 0 10upx;
			padding-bottom: 10upx;
			border-bottom: 1px solid #F6F6F6;
			// width: 0;
			// overflow: hidden;
			.userBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.userBoxL{
					display: flex;
					align-items: center;
					// padding-left: 10upx;
					.userAge{
						background-color: #44B3FF;
						color: #FFFFFF;
						padding: 0upx 10upx;
						border-radius: 20px;
						font-size: 16upx;
						margin-left: 10upx;
						view{
							font-size: 20upx;
						}
					}
					.userAgeSex{
						background-color: #FF6A8D;
					}
				}
				.userFollow{
					background-color: #DBDBDB;
					padding: 5upx 15upx;
					border-radius: 10px;
					view{
						font-size: 20upx;
					}
				}
			}
			.userType{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				.icon-bofang{
					position: absolute;
					font-size: 120upx;
					color: #FFFFFF;
				}
				.userDetail{
					position: absolute;
					bottom: 10upx;
					right: 10upx;
					background-color:#353131 ;
					color: #FFFFFF;
					border-radius: 10upx;
					padding: 0 10upx;
				}
				.userTypeT{
					background-color: #F7F7F7;
					padding: 10upx;
					display: flex;
					align-items: center;
					width: 100%;
					border-radius: 10upx;
					image{
						width: 200upx;
						height: 150upx;
						border-radius: 10upx;
						margin-right: 10upx;
						flex-shrink: 0;
					}
				}
			}
			.userType image{
				border-radius: 10px;
				width: 100%;
			}
			.userFoot{
				margin-top: 10upx;
				display: flex;
				justify-content: space-between;
				color: #CCCCCC;
				font-size: 28upx;
				.userfunction{
					display: flex;
					align-items: center;
					view{
						margin-left: 10upx;
						font-size: 25upx;
					}
				}
			}
		}
		
	}
</style>
